<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <span class="er" v-if="index == breadcrumbList.length - 1">{{
        item.name
      }}</span>
      <span v-else>{{ item.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const breadcrumbList = ref([]);

const pathList = ref([]);

const init = () => {
  breadcrumbList.value = route.matched;
  const data = ref({
    path: route.matched[1].path,
    name: route.matched[1].name,
  });
  if (localStorage.getItem("pathList")) {
    const arr = JSON.parse(localStorage.getItem("pathList"));
    const flag = arr.some((item) => item.path == route.matched[1].path);
    if (flag) {
    } else {
      if (arr.length >= 10) {
        arr.shift();
      }
      arr.push(data.value);
      localStorage.setItem("pathList", JSON.stringify(arr));
    }
  } else {
    const arr = [];
    arr.push(data.value);
    localStorage.setItem("pathList", JSON.stringify(arr));
  }
};

watch(
  route,
  () => {
    init();
  },
  { deep: true, immediate: true }
);
</script>

<style scoped>
span {
  font-size: 14px;
}
.er {
  margin-top: 5px;
  color: #999 !important;
  font-size: 13px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>